<template>
  <div>
    <el-table :data="newsList">
      <el-table-column prop="date" label="序号" width="100">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="title" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="subTitle" label="邮箱" width="200px">
      </el-table-column>
      <el-table-column prop="imageId" label="公司" width="200px">
      </el-table-column>
      <el-table-column label="职位" width="200px"> </el-table-column>
      <el-table-column prop="detail" label="说明"> </el-table-column>
      <el-table-column prop="language" label="附件" width="200px">
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="scope">
          <el-button @click="onDelete(scope)" type="text">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="position:absolute;bottom:100px"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="onCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  apiAddMessage,
  apiGetMessageList,
  apiUpdateMessage,
  apiDeleteMessage,
  apiUploadImage,
} from "@/api/admin";
export default {
  name: "NewsList",
  data() {
    return {
      newsList: [],
      showDialog: false,
      form: {
        businessType: 1,
        messageId: -1,
        title: "",
        subTitle: "",
        imageId: "",
        detail: "",
        language: 1,
        imageId: "",
      },
      type: "ADD",
      total: 0,
      pageSize: 5,
    };
  },
  computed: {
    editor() {
      // return this.$refs.myTextEditor.quill;
    },
  },
  beforeMount() {
    // 只会在浏览器执行
    // this.$options.components.QuillEditor = () => import("vue-quill-editor");
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    async getList(current = 1) {
      await apiGetMessageList({ businessType: 1, current }).then((res) => {
        const data = res.data.data;
        this.newsList = res.data.data.records;
        this.total = data.total;
      });
    },
    // TODO:给后端图片，返imageId
    onUploadFile(params) {
      let file = params.file;
      let formData = new FormData();
      formData.append("file", file);
      formData.append("me");
      apiUploadImage(formData).then((res) => {
        this.$message.success("导入成功");
      });
    },
    onCurrentChange(currentPage) {
      this.getList(currentPage);
    },
    onAdd() {
      this.type = "ADD";
      this.form = {
        businessType: 1,
        messageId: -1,
        title: "",
        subTitle: "",
        imageId: "",
        detail: "",
        language: 1,
        imageId: "",
      };
      this.showDialog = true;
    },
    onEdit(scope) {
      this.type = "EDIT";
      Object.assign(this.form, scope.row);
      this.showDialog = true;
    },
    onDelete(scope) {
      this.$confirm("确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async () => {
        await apiDeleteMessage({ messageId: scope.row.messageId });
        this.showDialog = false;
        this.getList();
      });
    },
    async onSave() {
      if (this.type === "ADD") {
        await apiAddMessage(this.form);
      } else {
        await apiUpdateMessage(this.form);
      }
      this.showDialog = false;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
